<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        /*方案1 ： flex*/
        /*body {
            display: flex;
            justify-content: center; !*水平居中*!
            align-items: center; !*垂直居中*!
            height: 100vh;
        }
        .box {
            width: 1000px;
            height: 500px;
            background: #b0b0b0;
        }*/

        /*方案2：使用绝对定位+margin*/
        /*.box {
            width: 1000px;
            height: 500px;
            background: #b0b0b0;

            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }*/

        /*方案3：使用绝对定位+transform*/
        /*.box {
            width: 1000px;
            height: 500px;
            background: #b0b0b0;
            position: absolute;
            top: 50%;
            left: 50%;

            -webkit-transform: translate(-50%,-50%); !*Chrome、Safari 和 Opera 浏览器的兼容前缀*!
            -moz-transform: translate(-50%,-50%); !*Firefox 浏览器的兼容前缀*!
            -ms-transform: translate(-50%,-50%); !*Internet Explorer 浏览器的兼容前缀*!
            -o-transform: translate(-50%,-50%); !*旧版 Opera 浏览器的兼容前缀*!
            transform: translate(-50%,-50%);
        }*/

        /*方案4 ：09.网格布局*/
        /*body {
            display: grid;
            justify-items: center;
            align-items: center;
            height: 100vh;
        }
        .box {
            width: 1000px;
            height: 500px;
            background: #b0b0b0;
        }*/

    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>